.base {
  position: relative;
  margin-right: 0.6875rem;
  margin-left: 0.75rem;
}

.input {
  width: 21.0625rem;
  padding-left: 2rem;
  padding-right: 0.6875rem;
  border: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-grey);
}

.input::placeholder {
  color: var(--pachyderm-black);
}

.input:focus {
  outline: none;
  border-bottom: 1px solid var(--pachyderm-plum);
}

.search {
  position: absolute;
  left: 0;
  top: 50%;
  transform: scale(0.75) translateY(calc(-50% - 3px));
}

.close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
  padding: 0;
}

.close:focus:not([class$='focus-visible']) {
  outline: none;
}

.closeIcon {
  transform: scale(0.75);
}

.closeIcon path:last-of-type {
  fill: var(--placeholder-grey);
}
